<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';

import { onMounted, ref, watch } from 'vue';

import { Page } from '@vben/common-ui';

import dayjs from 'dayjs';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getLogListApi } from '#/api/log-list';

interface RowType {
  title: string;
  name: string;
  account: string;
  create_at: string;
  message: string;
}

const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { title: '平台', field: 'platform' },
    { title: '名称', field: 'name' },
    { title: '账号', field: 'account' },
    { title: '时间', field: 'create_at', slots: { default: 'time' } },
    { title: '错误信息', field: 'message' },
  ],
  pagerConfig: {
    enabled: true,
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        const res = await getLogListApi({
          page: page.currentPage,
          limit: page.pageSize,
        });
        return {
          items: res.list,
          total: res.total,
        };
      },
    },
    sort: true,
  },
};

const [Grid] = useVbenVxeGrid({ gridOptions });

const logList = ref([]);
const total = ref(0);
const params = ref({
  page: 1,
  limit: 20,
});
const getLogList = async () => {
  const res: any = await getLogListApi(params.value);
  logList.value = res.list || [];
  total.value = res.total;
};
watch(
  () => params.value,
  () => {
    getLogList();
  },
  {
    deep: true,
  },
);
onMounted(() => {
  getLogList();
});
</script>

<template>
  <Page title="" description="">
    <Grid table-title="错误日志">
      <template #time="{ row }">
        {{ dayjs(row.created_at).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
    </Grid>

    <!-- <div class="log-list-container p-4">
      <ReTable
        :columns="column"
        @current-change="(val) => (params.page = val)"
        @size-change="(val) => (params.limit = val)"
        :data="logList"
        :pager="params"
        :total="total"
        :max-height="1050"
      >
        <template #time="scope">
          {{ dayjs(scope.row.created_at).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </ReTable>
    </div> -->
  </Page>
</template>

<style scoped lang="scss">
.log-list-container {
  background-color: hsl(var(--background));
}
</style>
